<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>菜单</title>
		<style>
		* {
			margin: 0;
			padding: 0;
		}
		input,
		label {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 22px;
		}
		input {
			opacity: 0;
			width: 22px;
			height: 22px;
			z-index: 100;
			margin: -11px;
			cursor: pointer;
		}
		label {
			height: 2px;
			background: #333;
			margin: -1px -11px;
			z-index: 99;
			-webkit-transition: .5s cubic-bezier(0.680, -0.55, 0.265, 1.55);
		}
		label:before,
		label:after {
			position: absolute;
			left: 0;
			content: '';
			display: block;
			width: 100%;
			height: 2px;
			background: #333;
			-webkit-transition: .5s cubic-bezier(0.680, -0.55, 0.265, 1.55);
			-webkit-transform-origin: left;
		}
		label:before {
			top: -7px;
		}
		label:after {
			bottom: -7px;
		}

		input:checked + label {
			background-color: transparent;
		}
		input:checked + label:before {
			-webkit-transform: rotateZ(45deg) translate3d(0px,-1px,0);
		}
		input:checked + label:after {
			-webkit-transform: rotateZ(-45deg) translate3d(0,1px,0);
		}
		</style>
	</head>
	<body>
		<input type="checkbox" id="menu-btn">
		<label for="menu-btn"></label>
	</body>
</html>